<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="110px">
      <el-form-item label="订单编号" prop="orderNo">
        <el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="下单时间" prop="createTime">
        <el-date-picker @change="createTimeChange" v-model="createTime" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
              </el-date-picker>
      </el-form-item>
      <el-form-item label="订单金额" prop="amount">
        <el-input v-model="queryParams.amountMin" placeholder="最小金额" clearable size="small"
          @keyup.enter.native="handleQuery" class="maxNum"/>
          <span class="line">—</span>
          <el-input v-model="queryParams.amountMax" placeholder="最大金额" clearable size="small"
          @keyup.enter.native="handleQuery" class="maxNum"/>
      </el-form-item>
      <el-form-item label="用户名" prop="fuwuPerson">
        <el-input v-model="queryParams.fuwuPerson" placeholder="请输入用户名" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="用户电话" prop="fuwuPhone">
        <el-input v-model="queryParams.fuwuPhone" placeholder="请输入用户电话" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="下单项目" prop="projectId">
        <el-select multiple v-model="queryParams.projectId" placeholder="请选择下单项目">
          <el-option v-for="contract in projectArray" :key="contract.id" :label="contract.projectName"
            :value="contract.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="服务技师" prop="nickName">
        <el-input v-model="queryParams.nickName" placeholder="请输入服务技师" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="技师电话" prop="phonenumber">
        <el-input v-model="queryParams.phonenumber" placeholder="请输入技师电话" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="出行方式" prop="chuxingType">
        <el-select clearable v-model="queryParams.chuxingType" placeholder="请选择出行方式">
          <el-option v-for="contract in chuxingTypeArray" :key="contract.dictValue" :label="contract.dictLabel"
            :value="contract.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="优惠券" prop="couponsFlag">
        <el-select clearable v-model="queryParams.couponsFlag" placeholder="请选择优惠券">
          <el-option v-for="contract in couponsFlagArray" :key="contract.dictValue" :label="contract.dictLabel"
            :value="contract.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remarkFlag">
        <el-select clearable v-model="queryParams.remarkFlag" placeholder="请选择备注">
          <el-option v-for="contract in remarkFlagArray" :key="contract.dictValue" :label="contract.dictLabel"
            :value="contract.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单状态" prop="orderStatus">
        <el-select clearable v-model="queryParams.orderStatus" placeholder="请选择订单状态">
          <el-option v-for="contract in orderStatusArray" :key="contract.dictValue" :label="contract.dictLabel"
            :value="contract.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="tabList" row-key="orderNo" lazy default-expand-all ref="orderTable"
      :tree-props="{children: 'children'}">
      <el-table-column label="订单编号" align="center" prop="orderNo" width="180"/>
      <el-table-column label="下单时间" align="center" prop="createTime" width="140"/>
      <el-table-column label="用户名" align="center" prop="fuwuPerson" />
      <el-table-column label="用户电话" align="center" prop="fuwuPhone" width="110"/>
      <el-table-column label="下单项目" align="center" prop="projectNames" />
      <el-table-column label="服务地址" align="center" prop="fuwuAddr" width="240"/>
      <el-table-column label="订单金额(元)" align="center" prop="totalAmount" width="100"/>
      <el-table-column label="服务技师" align="center" prop="nickName" >
        <template slot-scope="scope">
          <p>{{scope.row.nickName}}</p>
          <el-button
            v-if="((scope.row.orderStatus == '2' || scope.row.orderStatus == '3' || scope.row.orderStatus == '4' 
            || scope.row.orderStatus == '5' || scope.row.orderStatus == '6') && $auth.hasPermi('admin:order:edit'))"
            size="mini"
            @click="handleChangeJishi(scope.row)">更换</el-button>
        </template>
      </el-table-column>
      <el-table-column label="技师电话" align="center" prop="phonenumber" width="110"/>
      <el-table-column label="出行方式" align="center" prop="chuxingType" :formatter="chuxingTypeformatter"/>
      <el-table-column label="优惠券" align="center" prop="zhekouAmount" :formatter="couponsFlagformatter"/>
      <el-table-column label="详情" align="center" prop="remarkFlag">
        <template slot-scope="scope">
          <div @click="lookInfo(scope.row)" style="color:cornflowerblue;cursor: pointer;">查看详情</div>
        </template>
      </el-table-column>
      <el-table-column label="打卡拍照" align="center" prop="signPic">
        <template slot-scope="scope">
          <div @click="clockInClick(scope.row)" style="color:cornflowerblue;cursor: pointer;">查看打卡</div>
        </template>
      </el-table-column>
      <el-table-column label="报备" align="center" prop="report">
        <template slot-scope="scope">
          <div @click="reportClick(scope.row)" style="color:cornflowerblue;cursor: pointer;">查看报备</div>
        </template>
      </el-table-column>
      <el-table-column label="通话记录" align="center" prop="signPic">
        <template slot-scope="scope">
          <div @click="voiceClick(scope.row)" style="color:cornflowerblue;cursor: pointer;">查看通话</div>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center" prop="orderStatus" :formatter="orderStatusformatter"/>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
        <!-- 查看详情 -->
    <el-dialog title="查看详情" :close-on-click-modal="false" :visible.sync="open" width="500px" append-to-body >
      <div>
        <el-form>
          <el-input
            v-model="followInfo"
            type="textarea"
            :rows="2"
            disabled>
          </el-input>
        </el-form>
        <el-steps :active="current" direction="vertical"  align-center style="margin-top: 20px;">
          <el-step v-for="(step, index) in locations" :key="index">
            <template #title>
              <!-- 在这里插入自定义的标题内容 -->
              <span>{{ step.createTypeName }}</span>
              <i class="custom-icon" :class="step.iconClass"></i>
            </template>
            <template #description>
              <!-- 在这里插入自定义的描述内容 -->
              <span style="display: block;padding-bottom: 20px;">{{ step.addrDetail }} <br> {{ step.createTime }}</span>
            </template>
          </el-step>
        </el-steps>
        <div slot="footer" class="quesEditBtn">
          <el-button @click="cancel">取 消</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="查看报备" :close-on-click-modal="false" :visible.sync="reportOpen" width="500px" append-to-body >
      <div class="seeInt">
        报备：{{reportInfo.reportDesc}}
      </div>
      <div>
        <el-image style="width: 100px; height: 100px;margin:0 10px 10px 0" :src="item.url"  v-for="(item,index) in reportInfo.reportImgUrl" :preview-src-list="[item.url]"> </el-image>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="clockInShow" title="拍照打卡" width="500px">
      <img :src="clockInImg" alt="" class="clockInImgMax">
    </el-dialog>
    <el-dialog title="查看通话记录" :close-on-click-modal="false" :visible.sync="voiceOpen" width="800px" append-to-body >
      <div class="block">
        <el-table v-loading="loading" :data="voiceList" row-key="id" lazy default-expand-all>
          <el-table-column label="序号" align="center" type="index" width="50"/>
          <el-table-column label="主叫号码" align="center" prop="callerNumber" width="110"/>
          <el-table-column label="被叫号码" align="center" prop="calleeNumber" width="110"/>
          <el-table-column label="开始时间" align="center" prop="startTime" width="140"/>
          <el-table-column label="结束时间" align="center" prop="releaseTime" width="140"/>
          <el-table-column label="播放" align="center" prop="recordingUrl">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.showStart" 
                  @click="play(scope.row)" 
                  icon="el-icon-video-play" 
                  type="info" 
                  size="mini" 
                  plain 
                  round
              >播放</el-button>
              <el-button
                v-else 
                  @click="pause(scope.row)" 
                  icon="el-icon-video-pause" 
                  type="success" 
                  size="mini" 
                  plain 
                  round
              >暂停</el-button>
              <audio :ref="scope.row.id" @ended="over(scope.row)">
                  <source :src="scope.row.recordingUrl"/>
              </audio>
            </template>
          </el-table-column>      
          <el-table-column label="下载" align="center" prop="recordingUrl">
            <template slot-scope="scope">
              <el-button icon="el-icon-download" type="info" size="mini" plain  round  @click="downloadVoice(scope.row.recordingUrl)">
                下载
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <el-dialog title="选择更换技师" :close-on-click-modal="false" :visible.sync="changeJishiOpen" width="800px" append-to-body >
      <div class="block">
        <el-form :model="jsQueryParams" ref="jsQueryForm" :inline="true" v-show="jsShowSearch" label-width="110px">
          <el-form-item label="服务技师" prop="">
            <el-input v-model="jsQueryParams.keywords" placeholder="请输入服务技师" clearable size="small"
              @keyup.enter.native="handleJsQuery" />
          </el-form-item>
          <el-form-item label="技师电话" prop="phonenumber">
            <el-input v-model="jsQueryParams.phonenumber" placeholder="请输入技师电话" clearable size="small"
              @keyup.enter.native="handleJsQuery" />
          </el-form-item>
        
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleJsQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetJsQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="jsLoading" :data="jsTabList" row-key="userName" lazy default-expand-all>
          <el-table-column label="序号" align="center" type="index" width="50"/>
          <el-table-column label="昵称" align="center" prop="nickName"  />
          <el-table-column label="真实姓名" align="center" prop="realName"  />
          <el-table-column label="手机号" align="center" prop="phonenumber" />          
          <el-table-column label="选择" align="center" prop="recordingUrl">
            <template slot-scope="scope">

              <el-button type="primary" icon="el-icon-check" plain   circle @click="handleChangeConfirm(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="jsTotal > 0" :total="jsTotal" :page.sync="jsQueryParams.pageNum" :limit.sync="jsQueryParams.pageSize" @pagination="getJsList" />
      </div>
    </el-dialog>
  </div>
</template>
    
  <script>
  import { orderList , projectList, voiceList,reportInfo, orderInfo, jishiChangeSelectList, jishiChangeConfirm} from "@/api/orderList/orderList";
  import { getToken } from '@/utils/auth'
  export default {
    name: "Knowledge",
    components: {
    },
    data() {
      return {
        clockInShow:false,
        clockInImg:'',
        // 遮罩层
        loading: false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 表格数据
        tabList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        companyTypeOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          orderNo:null,
          createTime:null,
          fuwuPerson:null,
          fuwuPhone:null,
          projectId:null,
          amountMax:null,
          amountMin:null,
          jishiUserName:null,
          phonenumber:null,
          chuxingType:null,
          couponsFlag:null,
          remarkFlag:null,
        },
        createTime: '',
        createTimeStart: '',
        createTimeEnd: '',
        projectArray:[],//下单项目
        chuxingTypeArray:[],//出行方式
        couponsFlagArray:[],//优惠券
        remarkFlagArray:[],//是否有备注
        orderStatusArray:[],//订单状态
        followInfo:'',//查看备注
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        voiceOpen:false,
        voiceList:[],
        locations:[],
        orderLocationTypeArray:[],
        reportInfo:{},
        reportOpen:false,
        reverse:false,
        current:'',
        changeJishiOpen:false,
        jsQueryParams: {
          pageNum: 1,
          pageSize: 10,
          orderNo: null,
          keywords:null,
          phoneNumber:null,
        },
        // 遮罩层
        jsLoading: false,
        // 显示搜索条件
        jsShowSearch: true,
        // 总条数
        jsTotal: 0,
        // 表格数据
        jsTabList: [],
      };
    },
    created() {
      this.getList();
      this.pjList()
      //在字典查询-出行类型
      this.getDicts("chuxing_type").then(response => {
        this.chuxingTypeArray = response.data;
      });
      //优惠券
      this.getDicts("is_coupons_flag").then(response => {
        this.couponsFlagArray = response.data;
      });
      //备注
      this.getDicts("is_remark_flag").then(response => {
        this.remarkFlagArray = response.data;
      });
      //状态
      this.getDicts("order_status").then(response => {
        this.orderStatusArray = response.data;
      });
      //订单操作类型
      this.getDicts("order_location_type").then(response => {
        this.orderLocationTypeArray = response.data;
      });
    },
    methods: {
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.queryParams.createTimeStart = this.createTimeStart;
        this.queryParams.createTimeEnd = this.createTimeEnd;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.createTime = ''
        this.createTimeStart = ''
        this.createTimeEnd = ''
        this.queryParams.amountMax = '';
        this.queryParams.amountMin = '';
        this.handleQuery();
      },
      /** 查询产品入库列表 */
      getList() {
        this.loading = true;
        orderList(this.queryParams).then(response => {
          this.tabList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      pjList() {
        projectList().then(response => {
          this.projectArray = response.data;
        });
      },
      //下单时间
      createTimeChange() {
        this.createTimeStart = this.createTime[0] 
        this.createTimeEnd = this.createTime[1]
      },
      //出行方式
      chuxingTypeformatter(row, column) {
        return this.selectDictLabel(this.chuxingTypeArray, row.chuxingType) + " ￥" + row.chuxingFei;
      },
      //优惠券
      couponsFlagformatter(row, column) {
        return row.zhekouAmount ? "￥" + row.zhekouAmount : "无";
      },
      //状态
      orderStatusformatter(row, column) {
        return this.selectDictLabel(this.orderStatusArray, row.orderStatus);
      },
      //查看详情
      lookInfo(row){
        var that = this;
        orderInfo(row.orderNo).then(response => {
          if (response.data){
            this.current = response.data.currentCreateType
            this.locations = response.data.locations;
            if (this.locations.length > 0){
              this.locations = this.locations.map(i =>{return {
                ...i,
                createTypeName: that.orderLocationTypeformatter(i.createType)
              }})
            }
            // this.reportInfo = response.data.report;
            // if (this.reportInfo){ 
            //   if (this.reportInfo.reportImgUrl){
            //     this.reportInfo.reportImgUrl = JSON.parse(response.data.report.reportImgUrl)
            //   }else{
            //     this.reportInfo.reportImgUrl = []
            //   }
            // }else{
            //   this.reportInfo = {}
            // }
            this.followInfo = row.orderRemark
            this.open = true
          }else{
            this.$message({message: '暂无详情',type:'waring'});
          }
        });

      },
      //打卡拍照
      clockInClick(row){
        if(!row.signPic){
          this.$message({message: '暂无照片',type:'waring'});
        }else{
          this.clockInShow = true
          this.clockInImg = row.signPic
        }
        
      },
      //报备详情
      infoClick(row){
        this.orderInfo = {};
        var that = this;
        reportInfo(row.orderNo).then(response => {
          if (response.data){
            this.current = response.data.currentCreateType
            this.locations = response.data.locations;
            if (this.locations.length > 0){
              this.locations = this.locations.map(i =>{return {
                ...i,
                createTypeName: that.orderLocationTypeformatter(i.createType)
              }})
            }
            this.reportInfo = response.data.report;
            if (this.reportInfo){ 
              if (this.reportInfo.reportImgUrl){
                this.reportInfo.reportImgUrl = JSON.parse(response.data.report.reportImgUrl)
              }else{
                this.reportInfo.reportImgUrl = []
              }
            }else{
              this.reportInfo = {}
            }
            this.infoOpen = true;
          }else{
            this.$message({message: '暂无报备',type:'waring'});
          }
        });
      },
      reportClick(row){
        this.reportInfo = {};
        reportInfo(row.orderNo).then(response => {
          if (response.data){
            this.reportInfo = response.data;
            if (response.data.reportImgUrl){
              this.reportInfo.reportImgUrl = JSON.parse(response.data.reportImgUrl)
            }else{
              this.reportInfo.reportImgUrl = []
            }
            this.reportOpen = true;
          }else{
            this.$message({message: '暂无报备',type:'waring'});
          }
        });
      },
      voiceClick(row){
        voiceList(row.orderNo).then(response => {
          this.voiceList = response.data.map(el => {
            return {
              ...el,
              showStart:true
            }
          });
          
          this.voiceOpen = true;
        });
        
      },
      play(row){
          this.voiceList.map( item =>{
              if(row.id === item.id){ //获取点击的当前项
                  item.showStart = false //将当前按钮显示为暂停
                  if(!item.showStart){
                      this.$refs[row.id].play(); 
                  }
              }else{ // 非当前项的全部暂停
                  this.$refs[item.id].pause();
                  item.showStart = true; //将按钮显示为播放
              }
          })
      },
      pause(data){
          data.showStart = true;
          this.$refs[data.id].pause();
      },
      over(data){ //播放结束执行
        data.showStart = true; //播放结束将按钮显示为播放
        // this.voiceList.map((item,index)=>{
        //     if(data.id === item.id){
        //         if(this.tabelList[index + 1]){ //判断是否当前项播放完毕还有下一项
        //             this.tabelList[index + 1].showStart = false; //将下一项的按钮显示为暂停
        //             this.$refs[this.tabelList[index + 1].recordingId].play();//开启下一个
        //         }
        //     }
        // })
      },
      downloadVoice(row){
        console.log(row)
        // window.open(row, '_self')
        const link = document.createElement("a");
        link.style.display = 'none';
        link.href = row;
        document.body.appendChild(link);
        link.click();
      },
      rowClick(row, cloumn, event){
        console.log("click")
        // row.expanded = !row.expanded
        this.$refs.orderTable.toggleRowExpansion(row, !row.expanded)
      },
      cancel(){ 
        this.open = false
      },
      orderLocationTypeformatter(createType) {
        return this.selectDictLabel(this.orderLocationTypeArray, createType);
      },
      handleChangeJishi(row) {
        this.jsQueryParams.orderNo = row.orderNo;
        this.handleJsQuery();
        this.changeJishiOpen = true;
      },
      handleChangeConfirm(row) {
        this.$confirm('此操作将更改订单技师, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          jishiChangeConfirm({orderNo: this.jsQueryParams.orderNo, userName: row.userName}).then(response => {
            this.changeJishiOpen = false;
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            this.getList()
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });    
        });
      },
      /** 搜索按钮操作 */
      handleJsQuery() {
        this.jsQueryParams.pageNum = 1;
        this.getJsList();
      },
      /** 重置按钮操作 */
      resetJsQuery() {
        this.resetForm("jsQueryForm");
        this.jsQueryParams.pageNum = 1;
        this.jsQueryParams.keywords = '';
        this.jsQueryParams.phoneNumber = '';
        this.handleJsQuery();
      },
      /** 查询产品入库列表 */
      getJsList() {
        this.jsLoading = true;
        jishiChangeSelectList(this.jsQueryParams).then(response => {
          this.jsTabList = response.data.records;
          this.jsTotal = response.data.total;
          this.jsLoading = false;
        });
      },
    },
  };
  </script>
  <style>
  .el-timeline-item__tail{
    height: 125%;
  }
  .clockInImgMax{
    width: 200px;
    height: 200px;
  }
  .quesEditBtn{
    margin-top: 20px;
    display: block;
    text-align: center;
  }
  .el-input--small.maxNum{
    width: 100px;
  }
  .line{
    display: inline-block;
    width: 30px;
    text-align: center;
  }
  .seeInt{
    margin-bottom:20px;
    padding: 10px;
    min-height: 60px;
    border: 1px solid #999;
    border-radius: 4px;
  }
  </style>
    